<template>
  <view class="rh-picker-container">
    <view class="picker-item" @click="actionPicker">
      <view class="picker-label">
        <slot name="label-icon"></slot>
        <text class="label-txt">{{ label }}</text>
      </view>
      <view class="picker-content">
        <u--input
          v-model="emitValue"
          disabled
          :inputAlign="!label || label == '' ? 'left' : 'right'"
          fontSize="32rpx"
          disabledColor="#ffffff"
          :placeholder="placeholder"
          border="none"
        ></u--input>
        <u-icon v-if="!disabled" slot="right" name="arrow-right"></u-icon>
      </view>
    </view>
		<u-picker
			:show="boo.show"
			keyName="dictLabel"
			:closeOnClickOverlay="true"
			:title="pickerTitle"
			:columns="[columns]"
			itemHeight="50rpx"
			@confirm="confirm"
			@close="boo.show = false"
		></u-picker>
  </view>
</template>

<script>
export default {
  props: {
    label: String,
    value: [String, Number],
    placeholder: {
      type: String,
      default: () => {
        return "请选择";
      },
    },
    columns: {
      type: Array,
      default: () => {
        return [];
      },
    },
    pickerTitle: {
      type: String,
      default: () => {
        return "";
      },
    },
  },
  data() {
    return {
      emitValue: this.value,
      boo: {
        show: false,
      },
    };
  },
  watch: {
    value(val) {
      if (!this.columns.length) {
        this.emitValue = val;
      } else {
        let item = this.columns.find((i) => i.dictValue == val) || {};
        this.emitValue = item.dictLabel;
      }
    },
    columns(list) {
      if (!list.length) {
        this.emitValue = this.value;
      } else {
        if (!this.value || this.value == "") return;
        let item = list.find((i) => i.dictValue == this.value) || {};
        this.emitValue = item.dictLabel;
      }
    },
  },
  mounted(){
    console.log(this.value, 'value');
  },
  methods: {
    actionPicker() {
      let _self = this;
      _self.boo.show = true;
    },
    confirm(e) {
      console.log("🚀 ~ file: rh-picker.vue ~ line 128 ~ confirm ~ e", e)
      let _self = this,
        { value } = e;
      if (!value[0]) return _self.$attention.noIcon("无可选择数据");
      _self.emitValue = value[0]["dictLabel"];
      _self.$emit("input", value[0]["dictValue"]);
      _self.boo.show = false;
      _self.$emit("change", value[0]);
    },
  },
};
</script>

<style scoped lang="scss">
.rh-picker-container {
  width: 100%;
}
.picker-item {
  display: flex;
  justify-content: space-between;
  align-items: center;
  .picker-label {
    display: flex;
    align-items: center;
    .label-txt {
      font-size: 32rpx;
      color: #666;
    }
  }
  .picker-content {
    flex: 1;
    display: flex;
    align-items: center;
  }
}
</style>
